import React, { useState, useEffect } from 'react';
import { Breadcrumb, Card, Input, Table, Button, Modal, message } from 'antd';  //ui组件
import { useTotalType } from '../../hook/totalType'; //hoock
import { DeleteOutlined} from '@ant-design/icons'; //图标
 
import _ from 'lodash';




// eslint-disable-next-line
export default () => {
    //解构拿到hoock 暴露出来的出的初始值 和获取数据的方法
    const [{ rows, total, maxPage, curPage }, { getTotalType, addTotalType, deleteTatolType, amendTotalType }] = useTotalType()
 
    const { Search } = Input;

    // 删除数据 id 
    const [idData,setId]=useState("")

    //获取新增输入框 用户输入的商品总类型名称
    const onSearch = async value => {
        let totalTypeName = value;
        //调用hoock内新增商品总类型方法 输入框value作为参数传给此方法
        await addTotalType(totalTypeName)

        //调用hoock内的方法获取数商品类型的数据
        getTotalType();

    };


    //确认删除对话框的状态值
    const [isModalVisible, setIsModalVisible] = useState(false);

    //页面加载完成后调用useEffect获取列表数据 
    useEffect(() => {
        //调用hoock内的方法获取数商品类型的数据
        getTotalType();
    }, [getTotalType])


    //点击删除按钮时，状态值变为true 弹出层显示
    const showModal = (_id) => {
        setId(_id)
        setIsModalVisible(true);
    };

    //点击弹出层确认按钮，将参数作为id传给hock内删除方法--------------------
    const handleOk =async () => {
        // console.log("in",idData);
        // 调用hoock内的删除方法 发送删除请求
       deleteTatolType(idData)
        //将对话框的状态值改为fales
       await setIsModalVisible(false);
        //冲洗渲染页面
        getTotalType();
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //------------------------------------------------------------------------------

    //修改
    const amend = async (newType) => {
        //拿到新增成功的返回值
        const data = await amendTotalType(newType)
        const satte = data;
        if (satte) {
            //弹出提示框
            message.info('修改成功');
            //更新页面
            getTotalType();
        }
    }
    //初始化表头
    const columns = [
        {
            title: '商品类型',
            dataIndex: 'totalType_name',
            key: 'totalType_name',
            render: (text, record) => {
                const { _id } = record
                const onblur = e => {
                    const { value } = e.target
                    const totalType_name = value
                    //将id 和vlue传出去
                    amend({ _id, totalType_name })
                }
                return (

                    <Input defaultValue={text} onBlur={onblur} style={{ width: 500 }} />

                )
            }
        },
        {
            title: '操作',
            key: 'optionss',
            render: (text, record, index) => {
                //record可以获取表格内的数据，解构拿到_id
                const { _id,totalType_name } = record
                return (
                    //     <Button type="primary"  onClick={() => deleteType(_id)}>
                    //     删除
                    // </Button>
                    <>
                        <>
                            <Button type="primary" onClick={()=>showModal(_id)} icon={<DeleteOutlined />} size="middle" danger>
                                删除
                            </Button>
                            <Modal title="Basic Modal" visible={isModalVisible} onOk={() => handleOk()} onCancel={handleCancel}>
                                <p>此操作不可逆,是否确定删除</p>
                            </Modal>
                        </>
                    </>
                )




            }
        }

    ];


    return (
        <div>

            <Card bordered={false} style={{ width: "100%" }}>
                <Breadcrumb>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">商品类型</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>商品总类列表</Breadcrumb.Item>
                </Breadcrumb>
                <Search
                    placeholder="新增商品总类型"
                    allowClear
                    enterButton="新增"
                    size="large"
                    onSearch={onSearch}
                    style={{ width: 300, marginTop: 40 }}
                />
            </Card>

            <div className="site-card-border-less-wrapper">
                <Card bordered={false} style={{ width: "100%", }}>

                    <Table
                        editable={true}
                        dataSource={rows}
                        columns={columns}
                        rowKey={record => record._id}

                        pagination={{
                            pageSizeOptions: ["5", "10", "15", "20", "50"],
                            current: curPage,
                            total: total,
                            // onChange: (page, pageSize) => {
                            // setCurPage(page)
                            // setEachPage(pageSize)
                            // }
                        }}
                    />
                </Card>
            </div>

        </div>

    )
}